<style lang="stylus">
@import "../style/login.styl"
</style>

<template lang="pug">
.register.login
  .back.fz-34.white.flex(@click="onBack") 返回
  .center.fz-34.white 注册
  .logo
  .login-wrapper.bg-white.pd-40
    .input-wrapper.gray-99.fz-30.pdh-30.flex
      input.flex-1(placeholder='请输入11位手机号码', maxlength='11', v-model="phone")
      span.input-close.inline-block.mgl-30(v-show="phone.length", @click="phone=''")
    .input-wrapper.gray-99.fz-30.pdh-30.flex.mgt-30
      .flex-1.flex
        input.code-input.flex-1(placeholder='请输入验证码', maxlength='10', v-model="code")
        span.input-close.inline-block.mgl-30(v-show="code.length", @click="code=''")
      .fz-30.get-code.blue.center.bg-white.mgl-20(@click="getCode(SCENARIO_TYPE.REGISTER)") {{countDown ? codeMsg: '获取验证码'}}
    .input-wrapper.gray-99.fz-30.pdh-30.flex.mgt-30
      input.flex-1(type='password', placeholder='请输入密码', maxlength='30', v-model="password")
      span.input-close.inline-block.mgl-30(v-show="password.length", @click="password=''")
    .mgt-70.fz-28.txt-right(@click="backLogin") 返回登录页面
    .btn.white.fz-36.center(@click="onRegister") 注册
</template>

<script>
import loginMixin from '../mixin/login'

export default {
  name: 'register',
  mixins: [loginMixin],
  methods: {
    onRegister() {
      if (this.checkPhone() && this.checkPassword()) {
        this.$get('user/register', {
          account: this.phone,
          password: this.password,
          smsCode: this.code
        }).then(data => {
          console.log('注册成功', data)
          this.backLogin()
        })
      }
    }
  }
}
</script>
